<template>
  <view>
    <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-t-60 u-p-b-30">
      <view class="u-m-r-20">
        <u-avatar :src="pic" size="160"></u-avatar>
      </view>
      <view class="u-flex-1">
        <view class="u-font-18 u-p-b-20">{{ user_nick }}</view>
        <view class="u-font-12 u-tips-color">ID: {{ user_id }}</view>
      </view>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="account" title="我的信息"></u-cell-item>
        <u-cell-item icon="man-add-fill" title="我的班级"></u-cell-item>
        <u-cell-item icon="fingerprint" title="实名认证"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="bookmark" title="我的收藏"></u-cell-item>
        <u-cell-item icon="file-text" title="我的练习"></u-cell-item>
        <u-cell-item icon="list-dot" title="我的检测"></u-cell-item>
        <u-cell-item icon="edit-pen" title="我的成绩"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="info" title="版本信息"></u-cell-item>
        <u-cell-item icon="server-man" title="关于我们"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-40 u-m-b-80 ">
      <u-button
        v-if="!has_login"
        type="success"
        :ripple="true"
        class="bottom-button"
        @click="linkTo('/pages/info/login/loginWithPassword')"
        >登录</u-button
      >
      <u-button v-else type="error" :ripple="true" class="bottom-button"
        >注销</u-button
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pic:
        "https://tse1-mm.cn.bing.net/th/id/R-C.bee4f0a842901056f5e2ce8c3be66df9?rik=kQC6aK15769cyA&riu=http%3a%2f%2fscimg.jianbihuadq.com%2f202009%2f202009162308084.jpg&ehk=nqlNzlVQiiFDiiYWXTmPM7UG0X501m5sxR%2b2rRBZ5aI%3d&risl=&pid=ImgRaw&r=0",
      user_nick: "未登录",
      user_id: "未登录",
      has_login: false,
    };
  },
  onLoad() {},
  methods: {
    linkTo(val) {
      this.$u.route({
        url: val,
      });
    },
  },
};
</script>

<style lang="scss" secoped>
page {
  background-color: #ededed;
}
.user-box {
  background-color: #fff;
}
.bottom-button {
  width: 140px;
}
</style>
